<template>
  <!-- 简单的案例 -->
  <div ref="barCharts" style="width: 100%; height: 100%" />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const barCharts = ref(null);
const option = {
  // title: {
  //   text: "World Population"
  // },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter(params: any) {
      let relVal = "";
      for (let i = 0; i < params.length; i++) {
        relVal = params[i].value;
      }
      return relVal + "亿";
    },
  },
  // legend: {},
  grid: {
    top: "3%",
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
    show: false,
  },
  yAxis: {
    type: "category",
    data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: "累计消费",
      type: "bar",
      data: [28203, 33489, 49034, 124970, 191744, 630230],
      barWidth: 10,
      itemStyle: {
        // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
        borderRadius: [15, 15, 15, 15],
      },
      barGap: "0%",
      label: {
        show: true,
        position: "right",
        valueAnimation: true,
        formatter(param: any) {
          return param.value + "亿";
        },
      },
    },
  ],
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(barCharts.value as unknown as HTMLDivElement);
  chart.setOption(option);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>

<style scoped></style>
